<template>
  <div class="cart">
    <h2>我的购物车</h2>
    <p>
      <i>请添加你喜欢的商品</i>
    </p>
    <template v-if="cartList.length">
      <ul v-for="goods in cartList" :key="goods.id">
        <li>{{goods.title}} - {{goods.price}} * {{goods.quantity}}</li>
      </ul>
    </template>
    <span v-else>购物车空空如也，快去挑选喜欢的商品吧</span>
    <p>Total:{{cartStore.totalPrice}}</p>
    <p><button @click="cartStore.checkout()">结算</button></p>
    <p v-show="cartStore.checkoutState">结算{{ cartStore.checkoutState }}</p>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
// 引入cartStore
import { useCartStore } from '@/store/cart.ts'
const cartStore = useCartStore()
const { cartList } = storeToRefs(cartStore)
</script>